body {
	width: 800px;
	height: 600px;
	margin: auto auto;
	background: #000;
	background-image:url('../img/bg.jpg');
	background-attachment:fixed;
}

/*------nav------*/
nav {
	width: 800px;
	height: 50px;
	margin-top: 20px;
	-moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
	background-color: rgba(250, 250, 250, 0.5);
}

nav li {
	float: left;
	padding: 20 20 20 20;
	display: block;
	text-align: center;
	width: 110px;
	height: 50px;
	margin-left: 5px;
}

nav li:hover {
	height: 50px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
	background-color: rgba(0, 0, 0, 0.1);
	text-shadow: 0 0px 80px #fff;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

nav li a { 
	line-height:200%;
	font-size: 1.5em;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
	color: #000;
	text-shadow:0px 0px 35px #fff;
}
nav li a:link, nav li a:visited {
	outline: none;
	text-decoration: none;
	font-size: 1.5em;
}



nav li a:hover {
	color: #fff;
	font-size: 1.5em;
	text-decoration: none;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

#div_blank {
	width:400px;
}

/*search box*/
* { outline: 0 none;
	padding: 0;
    margin: 0; }
	
::selection {
    background-color: #55595c;
    color: #fff;
    text-shadow: 0 1px 0 #000;
}
::-moz-selection {
    background-color: #55595c;
    color: #fff;
    text-shadow: 0 1px 0 #000;
}
#wrap-search {
	padding:3px;
	width:100px;
	margin-left:auto;
	margin-right: 0;
	margin-bottom:30px;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius:3px;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-0-transition: all .2s ease-out;
}

#wrap-search.active {
	width:200px;
}

#search {
	padding:4px;
	border:1px solid #707070;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius:5px;
	-webkit-box-shadow:inset 0 1px 0 #fff;
    -moz-box-shadow: inset 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 #fff;
	background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(155,155,155)),
    color-stop(0.5, rgb(169,169,169)),
    color-stop(0.5, rgb(202,202,202)),
    color-stop(25.5, rgb(211,211,211)));
	background:-moz-linear-gradient(
    center bottom,
    rgb(155,155,155) 0%,
    rgb(169,169,169) 50%,
    rgb(202,202,202) 50%,
    rgb(211,211,211) 2550%);
}

.form-search {
	width:98%;
	position:relative;
	border:1px solid #747474;
	height:32px;
	
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius:3px;
	
	-webkit-box-shadow:inset 0 1px 1px #575555, 0 1px 0 #fff;
    -moz-box-shadow: inset 0 1px 1px #575555, 0 1px 0 #fff;
    box-shadow: inset 0 1px 1px #575555, 0 1px 0 #fff;
	
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-0-transition: all .2s ease-out;
}

.form-search input {
	width:83%;
	height:34px;
	border:none;
	padding:0 27px 0 6px;
	font:13px Helvetica, Arial, sans-serif;
	color:#6e7074;
	text-shadow:0 1px 0 #fff;
	
	background:none;
	
}


.form-search.close {
	background: -webkit-gradient(linear, 0 bottom, 0 top, from(#ebebeb ), to(#bcbcbc));
    background: -moz-linear-gradient(-90deg, #bcbcbc, #ebebeb );
}

.form-search.expand {
	width:99%;
	color:#25464d;

	-webkit-box-shadow:inset 0 1px 1px #46575b, 0 1px 0 #fff;
    -moz-box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #fff;
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #fff;
	
	background: -webkit-gradient(linear, 0 bottom, 0 top, from(#dfecef ), to(#9cc2ca));
    background: -moz-linear-gradient(-90deg, #9cc2ca, #dfecef );
}

.form-search.expand input  {
color:#597C84;	
}
#icn-search:hover, #icn-close:hover {
	cursor:pointer
}

.form-search.close #icn-search {
	width:7px;
	height:7px;
	position:relative;
	position:absolute;
	top:9px;
	right:10px;
	border:2px solid #7e7f84;
	
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	
}

.form-search.close #icn1 {
	width:2px;
	height:6px;
	background:#7e7f84;
	position:absolute;
	right:-1px;
	top:7px;
	
	-moz-transform: rotate(-25deg);  
    -webkit-transform: rotate(-25deg);
}

.form-search.expand #icn-close {
	position:relative;
	position:absolute;
	width:2px;
	height:13px;
	background:#597C84;
		top:10px;
	right:13px;
	
	-moz-transform: rotate(-45deg);  
    -webkit-transform: rotate(-45deg);
}

 .form-search.expand #icn2 {
	position:absolute;
	width:2px;
	height:13px;
	background:#597C84;
	
	-moz-transform: rotate(86deg);  
    -webkit-transform: rotate(86deg);

}

.boxtuffs {
	color: #807d98;
	font:12px Helvetica, Arial, sans-serif;
	text-decoration:none;
	-webkit-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-o-transition:all .2s ease-out;
}

.boxtuffs:hover {
	color: #27896a;
}
/*end search box*/
/*------nav------*/


/*------container------*/
#container {
	position: relative;
}

#container:hover {
   	-moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
	background-color: rgba(0, 0, 0, 0.1);
}

#content {
	position: absolute;
	float: left;
	margin-top: 20px;
	width: 580px;
	float: left;
   	-moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
	background-color: rgba(250, 250, 250, 0.5);
}

article {
	width: 560px;
	margin-top: 20px;
	margin: 10px;
	height: 250px;
	padding: 0 0 20 0;
	display: block;
	border: double 1px #adadad;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

article:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

.header_article {
	margin-left: 10px;
	margin-top: 10px;
	width: 500px;
	font-size: 1.6em;
}

.time_article {
	width: 500px;
	font-size: 1.1em;
	margin-left: 35px;
}

.body_article {
	margin-top: 15px;
	margin-left: 10px;
	line-height: 150%;
}
/*------end container------*/


aside {
	position: absolulte;
	float: right;
	width: 200px;
	height: 795px;
	float: right;
	margin-top: 20px;
	-moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
	background-color: rgba(250, 250, 250, 0.5);
}

.thumbnail_picture img {
	margin-top: 20px;
	margin-left: 10px;
	padding: 0 0 20 0;
}


aside .thumbnail_picture:nth-child(odd) img {
	transform: rotate(3deg);
	animation: swing 0.1s 5 ease-in;
}
aside .thumbnail_picture:nth-child(even) img {
	transform: rotate(-3deg);
	animation: swing 0.1s 5 0.3s ease-in;
}
aside .thumbnail_picture:nth-child(odd) img {
	transform: rotate(3deg);
	animation: swing 0.1s 5 0.2s ease-in;
}
aside .thumbnail_picture:nth-child(even) img {
	transform: rotate(-3deg);
	animation: swing 0.1s 5 0.5s ease-in;
}

/*------swing keyframe declaration------*/
@keyframes swing {
	0% {
		transform: rotate(3deg);
	}
	20% {
		transform: rotate(7deg);
	}
	60% {
		transform: rotate(10deg);
	}
	80% {
		transform: rotate(7deg);
	}
	100% {
		transform: rotate(3deg);
	}
}
/*------end swing keyframe declaration------*/
